<template>
  <div>
    <el-col :span="24">
      <el-card class="note" style="width: 100%;text-align: center" shadow="never" v-model="note">
        <div slot="header" class="clearfix">
          <span>{{ note.name }}</span>
          <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-more" @click="read(note.id)"></i></el-button>
        </div>
        <mavon-editor
          ref="md"
          v-model="note.contentMd"
          @save="saveNote"
          @imgAdd="imgAdd">
          <button
            type="button"
            class="op-icon el-icon-s-management"
            :title="'笔记链接'"
            slot="left-toolbar-after"
            @click="getNoteList"
          ></button>
          <!-- 新增按钮 -->
          <button
            type="button"
            class="op-icon el-icon-upload"
            :title="'AI续写'"
            slot="left-toolbar-after"
            @click="sendSelectedText">
          </button>
          <button
            type="button"
            class="op-icon el-icon-refrigerator"
            :title="'自动分类'"
            slot="left-toolbar-after"
            @click="autoCategory">
          </button>
        </mavon-editor>
      </el-card>
      <el-row>
        <el-button type="primary" icon="el-icon-back"  class="back" @click="back">返回笔记页</el-button>
      </el-row>
    </el-col>

    <el-dialog
      :visible.sync="dialogFormVisible"
      width="40%"
      center
      :title="'设置笔记链接'">
      <el-row>
        <el-form>
          <el-form-item v-model="noteLink" >
            <el-select v-model="noteLink.noteIndex" placeholder="请选择链接笔记" @change="getTitleList" style="width: 100%">
              <el-option v-for="(item,i) in noteList" :label="item.name" :value="i" :key="item.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="noteLink.titleID" placeholder="请选择链接标题" @change="generateLink" style="width: 100%">
              <el-option v-for="item in titleList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-input style="width: 65%" v-model="noteLink.link" id="notelink"></el-input>
        <el-button
          data-clipboard-target="#notelink"
          data-clipboard-action="copy"
          type="primary"
          icon="el-icon-document-copy"
          style="font-size: 13px;margin-left: 0px;width: 30%;float: right"
          class="copy-btn"
          @click="copyLink">
          复制
        </el-button>


      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: "NoteEdit",
  data() {
    return {
      noteLink: {
        noteIndex:'',
        titleID:'',
        link:''
      },
      dialogFormVisible:false,
      noteList:[],
      titleList:[],
      note:{
        contentMd:''
      },
      selectedText: ''
    }
  },
  mounted() {
    if(this.$route.query.noteId){
      this.loadNote(this.$route.query.noteId)
    }
  },
  methods: {
    // 处理选中内容变化
    handleSelectionChange(selection) {
      this.selectedText = selection.text;
    },
    // 发送选中内容到后端
    // 发送选中内容到后端
    sendSelectedText() {
      const selectedText = window.getSelection().toString().trim(); // 获取选中内容并去除首尾空格
      if (!selectedText) {
        this.$message({
          type: 'warning',
          message: '请先选中文字内容'
        });
        return;
      }
      else{
        this.$message({
          type: 'success',
          message: '处理中，请耐心等待'
        });
      }
      const _this = this;
      this.axios.post('/note/continue', {requestText:selectedText})
        .then((response) => {
          if (response.data.code === 0) {
            console.log(response.data.data)
            this.printText(response.data.data)
            _this.$message({
              type: 'success',
              message: '处理成功'
            });
          }
        })
        .catch((error) => {
          console.log(error);
          _this.$message({
            type: 'error',
            message: '发生错误'
          });
        });
    },
    printText(text){
      this.note.contentMd = this.note.contentMd+ "\n大模型扩写内容：\n" +text
    },
    autoCategory(){
      const _this = this;
      this.axios.post('/note/autoCategorize/'+this.note.id)
        .then(function (response) {
          if (response.data.code === 0) {
            _this.$message({
              type: 'success',
              message: '处理成功'
            });
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message({
            type: 'error',
            message: '发生错误'
          });
        });
    },
    loadNote(id){
      var _this = this
      this.axios.get('/note/detail/'+id)
        .then(function (response) {
          if(response.data.code === 0){
            _this.note = response.data.data
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    saveNote(value,render){
      var _this = this
      var url = '/note/save/'+this.note.id
      this.note.contentMd = value
      this.note.contentHtml = render
      this.axios.post(url,this.note)
        .then(function (response) {
          if(response.data.code === 0){
            _this.$message({
              type:'success',
              message:'保存成功'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    read(id){
      this.$router.push({
        path:'/note/detail',
        name:'NoteDetail',
        query:{
          noteId:id
        }
      })
    },
    getNoteList(){
      var _this = this
      this.axios.get('/notes')
        .then(function (response) {
          if(response.status === 200){
            _this.noteList = response.data
            _this.dialogFormVisible = true
            console.log(_this.noteList)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getTitleList(){
      this.titleList = []
      this.noteLink.titleID = ''
      this.noteLink.link = ''
      var content = this.noteList[this.noteLink.noteIndex].contentHtml
      let div = document.createElement("div")
      div.innerHTML = content
      let doc = div.children
      for(var i=0;i<doc.length;i++){
        if(doc[i].nodeName.indexOf("H") !== -1){
          this.titleList.push({
            id:doc[i].children[0].getAttribute("id"),
            name:doc[i].innerText,
          })
        }
      }
    },
    generateLink(){
      this.noteLink.link = ''
      var prefix = "notelink://"
      this.noteLink.link = prefix+(this.noteList[this.noteLink.noteIndex].id)+"&"+this.noteLink.titleID
    },
    copyLink(){
      let clipboard = new Clipboard('.copy-btn')
      clipboard.on('success', e => {
        this.$message({
          type: 'success',
          message:'复制成功'
        });
        this.dialogFormVisible = false
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message('复制失败');
        this.dialogFormVisible = false
        setTimeout(() => {
        }, 500)
        clipboard.destroy()
      })

    },
    /** this part is to handle the upload of the pics**/
    imgAdd(pos, $file){
      var _this = this
      var formData = new FormData();
      formData.append('image', $file);
      this.axios({
        url: 'pic/',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((response) => {
        if(response.status === 200){
          let url = response.data.object;
          _this.$refs.md.$img2Url(pos, url);
        }
        console.log(url)

      })
    },

    back(){
      this.$router.go(-1);
    }
  }
}
</script>

<style>
.op-icon {
  margin-right: 5px;
}

</style>
